<template>
  <div v-loading="loadings" class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px" label-position="left">
      <el-form-item label="移位编号" prop="move_id">
        <el-input
          v-model="queryParams.move_id"
          placeholder="移位编号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="商品名称" prop="goods_name">
        <el-input
          v-model="queryParams.goods_name"
          placeholder="商品名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="托盘码" prop="tray_id">
        <el-input
          v-model="queryParams.tray_id"
          placeholder="托盘码"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="moveGo"
        >全部移库
        </el-button>
      </el-col>
    </el-row>

    <!--    <el-row :gutter="10" class="mb8">-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--          type="primary"-->
    <!--          icon="el-icon-plus"-->
    <!--          size="mini"-->
    <!--          @click="handleCreate({ },'移库')"-->
    <!--        >移库-->
    <!--        </el-button>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

    <el-table v-loading="loading" :data="list" style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="50" :selectable="sel" />
      <el-table-column label="ID" align="center" prop="id" width="60" />
      <el-table-column label="库存编号" align="center" prop="stock_id" />
      <el-table-column label="箱号" align="center" prop="box_id" />
      <el-table-column label="片号" align="center" prop="slice_id" />
      <el-table-column label="移位编号" align="center" prop="move_id" />
      <el-table-column label="商品名称" align="center" prop="goods_name" />
      <el-table-column label="托盘码" align="center" prop="tray_id" />
      <el-table-column label="移出库位编号" align="center" prop="config_id_one_name" />
      <el-table-column label="目标库位编号" align="center" prop="config_id_two_name" />
      <el-table-column
        label="移库状态"
        prop="status"
      >
        <template v-slot="scope">
          <span v-if="scope.row.status == 0">未移库</span>
          <span v-if="scope.row.status == 1">已移库</span>
        </template>
      </el-table-column>
      <!--      <el-table-column label="操作人" align="center" prop="user_name" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === '0'"
            size="mini"
            type="primary"
            plain
            @click="move(scope.row)"
          >移库
          </el-button>
          <el-button
            v-if="scope.row.status === '0'"
            size="mini"
            type="danger"
            @click="handleDel(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
    <!-- 新增 -->
    <!--    <el-dialog :title="title" :visible.sync="open" width="1400px" append-to-body>-->
    <!--      <el-form ref="searchForm" :inline="true" label-width="70px" v-loading="loadingx">-->
    <!--        <el-row>-->
    <!--          <el-col :span="5">-->
    <!--            <el-form-item label="商品名称" >-->
    <!--              <el-input v-model="searchForm.goods_name"></el-input>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="5">-->
    <!--            <el-form-item label="项目名称">-->
    <!--              <el-input v-model="searchForm.project_name"></el-input>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="5">-->
    <!--            <el-form-item label="入库编号">-->
    <!--              <el-input v-model="searchForm.warehousing_id"></el-input>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="5">-->
    <!--            <el-form-item label="托盘码">-->
    <!--              <el-input v-model="searchForm.tray_id"></el-input>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="4">-->
    <!--            <el-button icon="el-icon-search" type="primary" plain circle @click="getStock"></el-button>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--      </el-form>-->
    <!--      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left" class="demo-ruleForm">-->
    <!--        <el-row>-->
    <!--          <el-col :span="24">-->
    <!--            <el-transfer-->
    <!--              v-model="form.checked"-->
    <!--              :data="stockList"-->
    <!--              filterable-->
    <!--              :filter-method="dataFilter"-->
    <!--              :titles="['待选', '已选']"-->
    <!--              @change="getObject"-->
    <!--            >-->
    <!--              <span slot-scope="{ option }">-->
    <!--                  <span class="span1" style="width:150px">{{ option.label?option.label:"&#45;&#45;" }}</span>-->
    <!--                  <span class="span1" style="width:100px">{{ option.config_name?option.config_name:"&#45;&#45;" }}</span>-->
    <!--                  <span class="span1" style="width:150px">{{ option.tray_id?option.tray_id:"&#45;&#45;" }}</span>-->
    <!--                  <span class="span1" style="width:50px">{{ option.Good_Qty?option.Good_Qty:"&#45;&#45;" }}</span>-->
    <!--              </span>-->
    <!--            </el-transfer>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--        <el-row style="top: 30px;margin-bottom: 30px;" v-loading="loading">-->
    <!--          <el-col :span="24">-->
    <!--            <el-form-item label="目标库位" prop="location">-->
    <!--              <el-cascader-->
    <!--                v-model="location"-->
    <!--                placeholder="请选择库位"-->
    <!--                :options="selectData"-->
    <!--                clearable-->
    <!--                filterable-->
    <!--                :props="props"-->
    <!--                style="width: 30%;"-->
    <!--              />-->
    <!--              <el-input v-model="search" placeholder="请输入库位关键词" style="width: 20%;margin-left: 3%;"></el-input>-->
    <!--              <el-button @click="getBox" icon="el-icon-search" type="primary" plain circle style="margin-left: 15px;"></el-button>-->
    <!--            </el-form-item>-->
    <!--            <el-form-item label="" label-width="10px">-->
    <!--              <span v-for="(item,index) in choice" :key="index">{{item}} / </span>-->
    <!--            </el-form-item>-->
    <!--            <div style="height:150px;margin-top: 20px;overflow-y:auto;">-->
    <!--              <el-checkbox-group v-model="choice" size="medium" :max="max">-->
    <!--                <el-checkbox-button v-for="item in box" :label="item.name" :key="item.config_id" class="box" border></el-checkbox-button>-->
    <!--              </el-checkbox-group>-->
    <!--            </div>-->

    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--        <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">-->
    <!--          <el-col :span="24">-->
    <!--            <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>-->
    <!--            <el-button size="medium" @click="open=false">取消</el-button>-->

    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--      </el-form>-->
    <!--    </el-dialog>-->
  </div>

</template>
<style>
.box{
  /* float:left; */
  margin: 3px;
  width: 100px;
  display: inline-grid;
}
.el-input__suffix {
  right: 10%;
}
.el-transfer-panel {
  width: 100%;
}
.el-transfer-panel__list.is-filterable {
  height: 300px;
}
.el-transfer-panel__body {
  height: 350px;
}
.span1{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8492a6;
  font-size: 13px;
  float: left;
  margin-left: 5px;
  text-align: center;
}
</style>
<script>
import { moveCreate, moveList, getStock, locationList, getLocation, loacalConfig, getSon, att, moveDelete, moveSure, moveAllSure } from '@/api/stock'
export default {
  name: 'StockMove',
  data() {
    return {
      searchForm: {},
      location: [],
      selectData: [],
      box: [],
      choice: [],
      search: '',
      checked: true,
      max: 0, // 多选框数量
      // 遮罩层
      loading: true,
      loadings: false,
      loadingx: false,
      open: false,
      title: '',
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      project: [],
      selectData: [],
      stockList: [],
      info: '',
      // 查询参数
      queryParams: {
        page: 1,
        limit: 10,
        supplier_name: undefined
      },
      form: {},
      show: false,
      ids: [],
      multiple: false,
      rules: {},
      props: {
        expandTrigger: 'hover'
      },
      move_code: ''
    }
  },
  computed: {
    list_num() {
      return this.form.checked ? this.form.checked.length : 0
    }
  },
  watch: {
    list_num() {
      this.max = this.list_num
    }
  },
  created() {
    this.getList()
    // this.getLocationx()
  },
  methods: {
    sel(row, index) {
      if (row.status == 0) {
        return true
      } else {
        return false
      }
    },
    move(row) {
      const that = this
      that.$confirm('是否确认移库？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        that.loading = true
        moveSure({ id: row.id.toString() }).then(response => {
          that.loading = false
          if (response.code === 10000) {
            that.$message.success(response.message)
            that.getList()
          } else {
            that.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    moveGo() {
      const that = this
      if (that.ids.length == 0) {
        that.$message.error('请勾选要入库的数据！')
        return false
      }
      that.$confirm('是否确认全部移库？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        // that.loading = true
        moveAllSure({ ids: that.ids.toString() }).then(response => {
          console.log('yes')
          that.loading = false
          if (response.code === 10000) {
            that.$message.success(response.message)
            that.getList()
          } else {
            that.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    getStock() {
      this.loadingx = true
      getStock({ searchForm: this.searchForm }).then(response => {
        this.loadingx = false
        const data = [
          {
            key: 0,
            id: '',
            label: '商品名称',
            config_name: '库位',
            tray_id: '托盘码',
            box_id: '箱号',
            slice_id: '片号',
            Good_Qty: '库存',
            disabled: true
          }
        ]
        for (let i = 0; i < response.data.length; i++) {
          data.push({
            key: i + 1,
            id: response.data[i].id,
            label: response.data[i].goods_name,
            config_name: response.data[i].config_name,
            config_id: response.data[i].config_id,
            goods_id: response.data[i].goods_id,
            tray_id: response.data[i].tray_id,
            box_id: response.data[i].box_id,
            slice_id: response.data[i].slice_id,
            Good_Qty: response.data[i].Good_Qty
          })
        }
        this.stockList = data
        // that.form = row
        // that.title = title
        // that.open = true
        // if (that.$refs['form']) {
        //   that.$refs['form'].clearValidate()
        // }
      })
    },
    /** 查询库位 */
    getLocationx() {
      const that = this
      att().then(response => {
        if (response.code === 10000) {
          that.selectData = JSON.parse(JSON.stringify(response.data))
          that.selectList(that.selectData)
        }
      })
    },
    getBox() {
      if (this.location.length == 0) {
        this.$message({
          showClose: true,
          message: '请选择仓库！',
          type: 'error'
        })
        return false
      }
      this.loading = true
      const location = JSON.parse(JSON.stringify(this.location))
      if (location.length) {
        const that = this
        getSon({ config_id: location[1], checked: that.checked, search: that.search }).then(response => {
          if (response.code === 10000) {
            that.box = JSON.parse(JSON.stringify(response.data))
            that.loading = false
          }
        })
      }
    },
    loacalConfig(level, config_id, resolve) {
      const that = this
      if (level == 3) {
        getSon({ config_id: config_id, checked: true }).then(response => {
          if (response.code === 10000) {
            var data = JSON.parse(JSON.stringify(response.data))
            for (const i in data) {
              var temp = { label: data[i].name, value: data[i].config_id }
              data[i] = temp
            }
            resolve(data)
          }
        })
      } else {
        loacalConfig({ level: level, config_id: config_id }).then(response => {
          if (response.code === 10000) {
            if (level == 1) {
              that.selectData = JSON.parse(JSON.stringify(response.data))
              that.selectList(that.selectData)
            } else if (level == 2) {
              var data = JSON.parse(JSON.stringify(response.data))
              data.forEach((item, index, arr) => {
                const temp = { label: item.name, value: item.config_id }
                arr[index] = temp
              })
              resolve(data)
            }
          }
        })
      }
    },
    /** 查询库位 */
    getLocation() {
      const that = this
      locationList().then(response => {
        if (response.code === 10000) {
          that.selectData = JSON.parse(JSON.stringify(response.data))
          that.selectList(that.selectData)
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /** 打开 */
    handleCreate(row, title) {
      const that = this
      that.title = title
      that.open = true
      // this.loadings = true
      // getStock().then(response => {
      //   this.loadings = false
      //   const data = [
      //     {
      //       key: 0,
      //       id: '',
      //       label: '商品名称',
      //       config_name: '库位',
      //       tray_id: '托盘码',
      //       box_id: '箱号',
      //       slice_id: '片号',
      //       Good_Qty: '库存',
      //       disabled: true
      //     }
      //   ]
      //   for (let i = 0; i < response.data.length; i++) {
      //     data.push({
      //       key: i + 1,
      //       id: response.data[i].id,
      //       label: response.data[i].goods_name,
      //       config_name: response.data[i].config_name,
      //       config_id: response.data[i].config_id,
      //       goods_id: response.data[i].goods_id,
      //       tray_id: response.data[i].tray_id,
      //       box_id: response.data[i].box_id,
      //       slice_id: response.data[i].slice_id,
      //       Good_Qty: response.data[i].Good_Qty
      //     })
      //   }
      //   that.stockList = data
      //   that.form = row
      //   that.title = title
      //   that.open = true
      //   if (that.$refs['form']) {
      //     that.$refs['form'].clearValidate()
      //   }
      // })
    },
    // 穿梭框改变
    getObject(value, direction, movedKeys) {
      this.ids = value
    },
    dataFilter(query, item) {
      return (item.label + item.config_name + item.tray_id + item.box_id + item.slice_id).indexOf(query) > -1
    },
    /** 状态字典翻译 */
    statusFormat(row, column) {
      let status = row.status
      for (const d of this.statusOptions) {
        if (row.status === d.value) {
          status = d.label
          break
        }
      }
      return status
    },
    /** 查询清单列表 */
    getList() {
      this.loading = true
      this.queryParams['move_code'] = this.$route.query.move_code
      this.move_code = this.$route.query.move_code
      moveList(this.queryParams).then(response => {
        this.list = response.data
        this.total = response.count
        this.loading = false
      })
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.form.checked === undefined || that.form.checked.length === 0) {
            that.$message.error('请选择移库商品')
            return
          }
          if (!that.choice.length) {
            that.$message.error('请选择目标库位')
            return
          }
          if (that.form.checked.length != that.choice.length) {
            that.$message.error('移库商品与目标库位不匹配')
            return
          }
          const info = []
          for (let i = 0; i < that.form.checked.length; i++) {
            info.push({
              'tray_id': that.stockList[that.form.checked[i]].tray_id ? that.stockList[that.form.checked[i]].tray_id : '',
              'box_id': that.stockList[that.form.checked[i]].box_id ? that.stockList[that.form.checked[i]].box_id : '',
              'slice_id': that.stockList[that.form.checked[i]].slice_id ? that.stockList[that.form.checked[i]].slice_id : '',
              'config_id': that.stockList[that.form.checked[i]].config_id ? that.stockList[that.form.checked[i]].config_id : '',
              'goods_name': that.stockList[that.form.checked[i]].label ? that.stockList[that.form.checked[i]].label : '',
              'goods_id': that.stockList[that.form.checked[i]].goods_id ? that.stockList[that.form.checked[i]].goods_id : ''
            })
          }
          const data = {
            info: info,
            config_id_two: that.choice// that.form.config_id[that.form.config_id.length - 1]
          }
          moveCreate(data).then(response => {
            that.$message.success(response.message)
            that.open = false
            // this.loacalConfig(1)
            that.getList()
          })
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 10,
        supplier_name: undefined
      }
      this.handleQuery()
    },
    /** 选中的项 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.multiple = !selection.length
    },
    /* 处理数据 */
    selectList(data) {
      const replaceKey = function(data) {
        data.forEach(function(row, index, arr) {
          const temp = { label: row.name, value: row.config_id }
          if (row.children !== undefined) {
            if (row.children.length > 0) {
              temp['children'] = row.children
            }
            arr[index] = temp
            if (arr[index].children.length > 0) {
              replaceKey(arr[index].children)
            }
          } else {
            arr[index] = temp
          }
        })
      }
      replaceKey(data)
    },
    /** 删除按钮操作 */
    handleDel(row) {
      const that = this
      that.$confirm('是否要删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        that.loading = true
        moveDelete({ id: row.id.toString() }).then(response => {
          that.loading = false
          if (response.code === 10000) {
            that.$message.success(response.message)
            that.getList()
          } else {
            that.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>

